<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-box flex-col">
        <div class="mt-tab-inner relative flex1">
            <div class="ui-mode-box body" ref="scroll">
                <div class="relative" v-if="list&&list.length">
                    <div class="mt_user"
                        :key="`evaluate-${i}`"
                        v-for="(item,i) in list"
                    >
                        <div class="mt-user-head">
                            <img id=weichat_img src="@/assets/images/head.png">
                            <span class="weichat_name">匿名</span>
                            <div class="bg">
                                <div class="over" :width="item.comment_star*20+'px'"></div>
                            </div>
                            <div class="mt-user-commodity"><i class="time_order">{{item.time_update}}</i>{{item.minimal_describe}}</div>
                            <div class="mt-user-characters">
                                {{item.comment_desc}}
                            </div>
                        </div>
                    </div>
                    <div v-if="isScrolling" class="flex1 flex-row align-center scrolling-content relative">
                        <span class="icon">
                            <bsx-loading master-background="rgba(0,0,0,0)" box-background="rgba(0,0,0,0)" :size="35" :show-text="false"></bsx-loading>
                        </span>
                        <span class="text">努力加载中...</span>
                    </div>
                    <div v-else-if="isLoadEnded" class="flex1 flex-row align-center scrolling-content relative">已经到底啦~~</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import mixinList from '@/views/content/mixins/list';
export default {
    name:'category/evaluate/list',
    data(){
        return {
            pageSize:10,
            public_agent_info:{},
            public_user_info:{},
            list:[]
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
        mixinList
    ],
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init);
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getListInfo({
                flag:true,
                page:0
            });
        },
        // 获取列表数据
		getListInfo({flag,page,callback}){
            this.getShopInfo().then(()=>{
                this.getPageInfo({
                    name:'food.detail.comment',
                    param:{
                        invoke_method:'list_comments_4_one_goods',
                        id_public_goods_info:this.$route.query.id,
                        comment_star:this.$route.query.index==0?'':6-(Number(this.$route.query.index)),
                        pre_db_para_begin_idx:page*this.pageSize,
                        pre_db_para_length_4_list:this.pageSize
                    }
                }).then(({result,response})=>{
                    if(result.public_goods_order_detail_list&&result.public_goods_order_detail_list.length){
                        this.list.push(...result.public_goods_order_detail_list.slice(0,this.pageSize));
                        this.currentPage=page;
                        if(result.public_goods_order_detail_list.length<this.pageSize){
                            this.isLoadEnded=true;
                        }else if((this.currentPage+1)*this.pageSize>=result.order_number){
                            this.isLoadEnded=true;
                        };
                        callback&&callback();
                    }else{
                        if(flag){
                            this.showResult('没有查询到相关数据');
                        }else{
                            this.showToast('没有查询到相关数据',false);
                        };
                        callback&&callback();
                    };
                }).catch(({msg})=>{
                    if(!flag){
                        this.showToast(msg,false);
                    };
                    callback&&callback();
                });
            })
		},
        getShopInfo(){
            return new Promise((resolve,reject)=>{
                if(this.public_user_info.id_public_user_info){

                } else {
                    this.$http.post({
                        name:'common.shop.info',
                        data:{
                            invoke_method:'user_and_shop_info'
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        this.public_user_info=result.public_user_info||{};
                        resolve({result,response});
                    }).catch(({msg})=>{
                        reject({msg});
                    });
                }
                
            });
        },
        // 请求失败刷新
        handleRefresh(){
            this.init();
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt_user {
    margin: 0 0.933rem;
    padding: 0.933rem 0;
    position: relative;
    height: 6.7rem;
    border-top: 1px solid #d8d8d8;
    .mt-user-head{
        img{
            float: left;
            width: 14%;
            border-radius: 3.4rem;
        }
        .weichat_name{
            line-height: 1.1rem;
            height: 1.2rem;
            width: 65%;
            float: left;
            font-size: 0.8rem;
            color: #949494;
            padding-left: 0.466rem;
            float: left;
        }
        .bg {
            width: 5.3rem;
            height: 0.84rem;
            background-image:url(~@/assets/images/star_gray.png);
            background-size: 5.3rem;
            position: absolute;
            top: 0.9rem;
            right: 0.3rem;
            .over {
                height:17px;
                background-image: url(~@/assets/images/star_org.png);
                background-size: 5.3rem;
            }
        }
        .mt-user-commodity {
            font-size: 0.64rem;
            float: left;
            padding-left: 0.466rem;
            color: #a8a8a8;
            .time_order{
                margin-right:.16rem;
            }
        }
        .mt-user-characters {
            width: 84%;
            margin-top: 0.22rem;
            float: left;
            font-size: 0.8rem;
            color: #727171;
            margin-left: 3rem;
            line-height: 1.2rem;
        }
    } 
}
</style>
